<template>
  <div class="md-toolbar" :class="{ 'md-toolbar--dark': isDarkTheme }">
    <div class="md-toolbar__left">
      <slot name="left"></slot>
    </div>
    
    <div class="md-toolbar__items">
      <template v-for="(item, index) in toolbarItems" :key="index">
        <!-- 分隔线 -->
        <div v-if="item.name === 'divider'" class="md-toolbar__divider"></div>
        
        <!-- 下拉菜单 -->
        <Dropdown v-else-if="item.children && item.children.length" trigger="hover">
          <template #trigger>
            <Tooltip :content="item.title || item.name">
              <Button
                type="text"
                :icon="item.icon"
                :active="item.isActive"
                @click="handleItemClick(item)"
              >
                {{ item.title }}
              </Button>
            </Tooltip>
          </template>
          
          <div class="md-toolbar__dropdown-menu">
            <div
              v-for="(child, childIndex) in item.children"
              :key="childIndex"
              class="md-toolbar__dropdown-item"
              :class="{ 'md-toolbar__dropdown-item--active': child.isActive }"
              @click="handleItemClick(child)"
            >
              <span v-if="child.icon" class="md-toolbar__dropdown-item-icon">{{ child.icon }}</span>
              <span class="md-toolbar__dropdown-item-text">{{ child.title || child.name }}</span>
            </div>
          </div>
        </Dropdown>
        
        <!-- 普通按钮 -->
        <Tooltip v-else :content="item.title || item.name">
          <Button
            type="text"
            :icon="item.icon"
            :active="item.isActive"
            @click="handleItemClick(item)"
          >
            {{ item.title }}
          </Button>
        </Tooltip>
      </template>
    </div>
    
    <div class="md-toolbar__right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useTheme } from '../../hooks/useTheme';
import { ToolbarItem, ToolbarConfig } from '../../types/editor';
import Button from '../Common/Button.vue';
import Dropdown from '../Common/Dropdown.vue';
import Tooltip from '../Common/Tooltip.vue';

interface Props {
  config?: ToolbarConfig;
}

const props = withDefaults(defineProps<Props>(), {
  config: () => ({ items: [] })
});

const emit = defineEmits<{
  (e: 'action', name: string, ...args: any[]): void;
}>();

const { currentTheme } = useTheme();
const isDarkTheme = computed(() => currentTheme.value === 'dark');

// SVG 图标组件
const getSvgIcon = (name: string) => {
  const icons: Record<string, string> = {
    heading: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M5 4v3h5.5v12h3V7H19V4z"/></svg>',
    bold: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/></svg>',
    italic: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"/></svg>',
    strikethrough: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6.85 7.08C6.85 4.37 9.45 3 12.24 3c1.64 0 3 .49 3.9 1.28.77.65 1.18 1.39 1.18 2.23 0 .78-.62 1.41-1.4 1.41-.84 0-1.4-.84-1.4-1.41 0-.35-.4-.7-.9-.7-1.04 0-1.81.83-1.81 1.81 0 .05.01.1.02.16H6.85zm5.15 9.92c-.78 0-1.44-.35-1.44-.78s.66-.78 1.44-.78.1.35 1.44.78-.66.78-1.44.78zM21 12v2H3v-2h18z"/></svg>',
    quote: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/></svg>',
    code: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>',
    codeBlock: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M8 3a2 2 0 0 0-2 2v4.586l-1.293-1.293a1 1 0 0 0-1.414 1.414L6.586 13l-3.293 3.293a1 1 0 1 0 1.414 1.414L6 16.414V21a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H8zm2 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-4 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>',
    unorderedList: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M7 5h14v2H7zm0 6h14v2H7zm0 6h14v2H7zM3 5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0z"/></svg>',
    orderedList: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M7 13h14v-2H7v2zm0 6h14v-2H7v2zM7 7v2h14V7H7zM3 8V6H2v1H1v1h1v1h1zm-1 3v1h1v1H2v1h2v-4H1v1zm2 7h-2v1h2v-1z"/></svg>',
    taskList: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M22 5.18L10.59 16.6l-6.36-6.36 1.41-1.41L10.59 14 20.59 3.77 22 5.18zM12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-18C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>',
    link: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>',
    image: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2 .9 2 2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>',
    emoji: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/><circle cx="15.5" cy="9.5" r="1.5"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="M12 17.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg>',
    table: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M20 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM8 19H5v-3h3v3zm0-5H5v-3h3v3zm0-5H5V6h3v3zm6 10h-4v-3h4v3zm0-5h-4v-3h4v3zm0-5h-4V6h4v3zm5 10h-3v-3h3v3zm0-5h-3v-3h3v3zm0-5h-3V6h3v3z"/></svg>',
    formula: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M15.5 12c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zm-3-1L9 8.5 5.5 12 9 15.5 12.5 12zm6.5-1.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5S20.5 7.17 20.5 8s-.67 1.5-1.5 1.5zM12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.77 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>',
    mermaid: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M3 3h18v18H3V3zm2 2v14h14V5H5zm2 2h10v2H7V7zm0 4h10v2H7v-2zm0 4h7v2H7v-2z"/><path fill="currentColor" d="M9 9l2 2-2 2V9zm4 0v4l2-2-2-2z"/></svg>',
    undo: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></svg>',
    redo: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/></svg>',
    import: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/></svg>',
    export: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M23,12L19,8V11H10V13H19V16M1,18V6C1,4.89 1.89,4 3,4H15A2,2 0 0,1 17,6V9H15V6H3V18H15V15H17V18A2,2 0 0,1 15,20H3C1.89,20 1,19.11 1,18Z"/></svg>',
    preview: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"/></svg>',
    fullscreen: '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>'
  };
  return icons[name] || '';
};

// 默认工具栏项
const defaultItems = ref<ToolbarItem[]>([
  // 文件操作
  { name: 'import', icon: getSvgIcon('import'), title: '导入', action: () => emit('action', 'import') },
  { name: 'export', icon: getSvgIcon('export'), title: '导出', children: [
    { name: 'export-md', title: '导出为 Markdown', action: () => emit('action', 'export', 'md') },
    { name: 'export-html', title: '导出为 HTML', action: () => emit('action', 'export', 'html') },
    { name: 'export-pdf', title: '导出为 PDF', action: () => emit('action', 'export', 'pdf') },
  ] },
  { name: 'divider' },
  // 编辑操作
  { name: 'undo', icon: getSvgIcon('undo'), title: '撤销', action: () => emit('action', 'undo') },
  { name: 'redo', icon: getSvgIcon('redo'), title: '重做', action: () => emit('action', 'redo') },
  { name: 'divider' },
  // 标题
  { name: 'heading', icon: getSvgIcon('heading'), title: '标题', children: [
    { name: 'heading-1', title: '标题 1', action: () => emit('action', 'heading', 1) },
    { name: 'heading-2', title: '标题 2', action: () => emit('action', 'heading', 2) },
    { name: 'heading-3', title: '标题 3', action: () => emit('action', 'heading', 3) },
    { name: 'heading-4', title: '标题 4', action: () => emit('action', 'heading', 4) },
    { name: 'heading-5', title: '标题 5', action: () => emit('action', 'heading', 5) },
    { name: 'heading-6', title: '标题 6', action: () => emit('action', 'heading', 6) },
  ] },
  // 文本格式
  { name: 'bold', icon: getSvgIcon('bold'), title: '粗体', action: () => emit('action', 'bold') },
  { name: 'italic', icon: getSvgIcon('italic'), title: '斜体', action: () => emit('action', 'italic') },
  { name: 'strikethrough', icon: getSvgIcon('strikethrough'), title: '删除线', action: () => emit('action', 'strikethrough') },
  { name: 'divider' },
  // 引用和代码
  { name: 'quote', icon: getSvgIcon('quote'), title: '引用', action: () => emit('action', 'quote') },
  { name: 'code', icon: getSvgIcon('code'), title: '代码', action: () => emit('action', 'code') },
  { name: 'code-block', icon: getSvgIcon('codeBlock'), title: '代码块', action: () => emit('action', 'code-block') },
  { name: 'divider' },
  // 列表
  { name: 'unordered-list', icon: getSvgIcon('unorderedList'), title: '无序列表', action: () => emit('action', 'unordered-list') },
  { name: 'ordered-list', icon: getSvgIcon('orderedList'), title: '有序列表', action: () => emit('action', 'ordered-list') },
  { name: 'task-list', icon: getSvgIcon('taskList'), title: '任务列表', action: () => emit('action', 'task-list') },
  { name: 'divider' },
  // 插入元素
  { name: 'table', icon: getSvgIcon('table'), title: '表格', action: () => emit('action', 'table') },
  { name: 'link', icon: getSvgIcon('link'), title: '链接', action: () => emit('action', 'link') },
  { name: 'image', icon: getSvgIcon('image'), title: '图片', action: () => emit('action', 'image') },
  { name: 'emoji', icon: getSvgIcon('emoji'), title: '表情', action: () => emit('action', 'emoji') },
  { name: 'formula', icon: getSvgIcon('formula'), title: '数学公式', action: () => emit('action', 'formula') },
  { name: 'mermaid', icon: getSvgIcon('mermaid'), title: 'Mermaid图表', action: () => emit('action', 'mermaid') },
  { name: 'divider' },
  // 视图操作
  { name: 'preview', icon: getSvgIcon('preview'), title: '预览', action: () => emit('action', 'preview') },
  { name: 'fullscreen', icon: getSvgIcon('fullscreen'), title: '全屏', action: () => emit('action', 'fullscreen') },
]);

// 合并自定义工具栏项
const toolbarItems = computed(() => {
  if (props.config?.items && props.config.items.length > 0) {
    return props.config.items;
  }
  
  if (props.config?.customItems && props.config.customItems.length > 0) {
    // 合并自定义项
    return [...defaultItems.value, ...props.config.customItems];
  }
  
  return defaultItems.value;
});

// 处理工具栏项点击
const handleItemClick = (item: ToolbarItem) => {
  if (item.action) {
    item.action();
  } else {
    // 确保事件正确触发，并传递必要的参数
    // 对于标题项，提取级别数字
    if (item.name.startsWith('heading-')) {
      const level = parseInt(item.name.split('-')[1]);
      if (!isNaN(level)) {
        emit('action', 'heading', level);
        return;
      }
    }
    emit('action', item.name);
  }
};

// 设置工具栏项激活状态
const setItemActive = (name: string, active: boolean) => {
  const findAndSetActive = (items: ToolbarItem[]) => {
    for (const item of items) {
      if (item.name === name) {
        item.isActive = active;
        return true;
      }
      
      if (item.children && item.children.length) {
        if (findAndSetActive(item.children)) {
          return true;
        }
      }
    }
    
    return false;
  };
  
  findAndSetActive(toolbarItems.value);
};

// 暴露方法
defineExpose({
  setItemActive
});
</script>

<style lang="scss" scoped>
.md-toolbar {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: var(--md-toolbarBg, #f5f5f5);
  border-bottom: 1px solid var(--md-borderColor, #e0e0e0);
  
  &--dark {
    background-color: var(--md-toolbarBg, #252525);
    border-color: var(--md-borderColor, #333333);
  }
  
  &__left {
    margin-right: auto;
  }
  
  &__right {
    margin-left: auto;
  }
  
  &__items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  
  &__divider {
    width: 1px;
    height: 16px;
    margin: 0 8px;
    background-color: var(--md-borderColor, #e0e0e0);
  }
  
  &__dropdown-menu {
    min-width: 120px;
  }
  
  &__dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.3s;
    
    &:hover {
      background-color: var(--md-hoverColor, #f5f5f5);
    }
    
    &--active {
      color: var(--md-activeColor, #1890ff);
    }
    
    &-icon {
      margin-right: 8px;
    }
  }
}
</style>